<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :close-on-click-modal="false"
    :before-close="handleCancel"
    :modal="false"
  >
    <ul>
      <li v-for="icon in icons" :key="icon">
        <i :class="[{'active':activeIndex === icon},`iconfont  ${icon}`]" :title="icon" @click="chooseIcon(icon)" />
      </li>
    </ul>
  </el-dialog>
</template>

<script>
// 自定义字体图标数据
import iconfontData from '@/assets/fonts/iconfont/iconfont.json'

export default {
  components: {},
  props: {
    visible: {
      type: [String, Boolean],
      default: false
    }
  },
  data() {
    return {
      icons: [],
      title: '',
      width: '800px',
      activeIndex: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    if (iconfontData) {
      if (iconfontData.glyphs && iconfontData.glyphs.length) {
        iconfontData.glyphs.forEach(v => {
          this.icons.push('icon-Xm-' + v.font_class)
        })
      }
    }
  },
  mounted() {},
  methods: {
    chooseIcon(i) {
      this.activeIndex = i
      this.$emit('close', i)
    },
    handleCancel() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
$active-color: #4a4a48;
ul {
  max-height: 700px;
  overflow-y: auto;
  padding-left: .5rem;
  i {
    font-size: 1.5rem;
    border: 1px solid #f1f1f1;
    padding: .1rem;
    margin: .3rem;
    cursor: pointer;
    &.active, &:hover {
      border-radius: 2px;
      border-color: $active-color;
      background-color: $active-color;
      color: #fff;
      transition: all .3s;
    }
  }
  li {
    list-style: none;
    float: left;
    width: 6%;
    text-align: center;
    cursor: pointer;
    color: #555;
    transition: color .3s ease-in-out,background-color .3s ease-in-out;
    position: relative;
    margin: 3px 0;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
    padding: 10px 0 0;
  }
}

</style>
